import { map } from "lodash";
import React from "react";
import PropTypes from "prop-types";
import Button from "antd/lib/button";
import Select from "antd/lib/select";
import Checkbox from "antd/lib/checkbox";
import Input from 'antd/lib/input';
import Modal from "antd/lib/modal";
import Divider from "antd/lib/divider";
import PlusOutlined from '@ant-design/icons/PlusOutlined';

import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
import Visualization from "@/services/visualization"
import "./EmbedComposeDialog.less";

const { Option } = Select;

class EmbedComposeDialog extends React.Component {
  static propTypes = {
    dialog: DialogPropType.isRequired,
    query: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
    visualization: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
  };

  state = {
    compose: this.props.visualization.options.compose,
    composesize: this.props.visualization.options.composesize,
    composehide: this.props.visualization.options.composehide,
    composewidget: this.props.visualization.options.composewidget,
    isChange: false,
    items: [],
    id: '',
  };

  handleChange(value) {
    try {
      this.setState({
        compose: value,
        isChange: true,
      });    
    }
    catch {}
  }

  handleSize(value) {
    try {
      this.setState({
        composesize: value,
        isChange: true,
      });    
    }
    catch {}
  }

  handleSave(dialog, visualization) {
    visualization.options.compose = this.state.compose;
    visualization.options.composesize = this.state.composesize;
    visualization.options.composehide = this.state.composehide || false;
    visualization.options.composewidget = this.state.composewidget || false;
    Visualization.save(visualization).then(()=> {
      dialog.dismiss();    
      window.location.reload();
    });
  }

  onNameChange = event => {
    this.setState({
      id: event.target.value,
    });
  };

  addItem = () => {
    const { items } = this.state;
    this.setState({
      items: [...items, this.state.id ],
      id: '',
    });
  };  

  render() {
    const { visualization, query, dialog } = this.props;

    return (
      <Modal
        {...dialog.props}
        maskClosable = {false}
        className="embed-query-dialog"
        title="组合视图"
        width={"50%"}
        footer={
          <React.Fragment>
            <Button key="save" disabled={!this.state.isChange} onClick={() => this.handleSave(dialog, visualization)}>保存</Button>
            <Button key="cancel" onClick={dialog.dismiss}>取消</Button>
          </React.Fragment>
        }>
        组合视图将按选择的顺序层叠到原视图上。
        <Select
          mode="multiple"
          allowClear
          style={{ width: '100%' }}
          placeholder="请选择组合视图"
          defaultValue={visualization.options.compose}
          onChange={value => {
            this.handleChange(value);
          }}
          dropdownRender={menu => (
            <div>
              {menu}
              <Divider style={{ margin: '4px 0' }} />
              <div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
                <Input placeholder="其它不带参数的查询视图" style={{ flex: 'auto' }} value={this.state.id} onChange={this.onNameChange} />
                <a
                  style={{ flex: 'none', padding: '8px', display: 'block', cursor: 'pointer' }}
                  onClick={this.addItem}
                >
                  <PlusOutlined /> 其它视图id
                </a>
              </div>
            </div>
          )}          
        >
          {map(query.visualizations, (vis)=> (this.state.composehide || vis.id !== visualization.id) && (
              <Option key={vis.id}>{vis.name}</Option>
          ))}
          {map(this.state.items, (item)=> (
              <Option key={item}>{item}</Option>
          ))}
        </Select>  
        <br/><br/>
        <Checkbox
          defaultChecked={visualization.options.composehide}
          onChange={e => this.setState({composehide: e.target.checked, isChange: true})}
        >不显示底层当前视图</Checkbox> 
        &nbsp;&nbsp; 
        <Checkbox
          defaultChecked={visualization.options.composewidget}
          onChange={e => this.setState({composewidget: e.target.checked, isChange: true})}
        >组合视图使用部件视区（默认使用视图视区）</Checkbox>  
        <br/><br/>
        视图位置和大小：
        <Input.TextArea
          rows={4}
          defaultValue={visualization.options.composesize}
          onChange={e => this.handleSize(e.target.value)}
        />
        按视图顺序每行一个，支持像素和百分比；以逗号分隔左、顶、宽、高，如：0,0,40%,50%
      </Modal>
    );
  }
}

export default wrapDialog(EmbedComposeDialog);
